<script setup lang="ts">
import {onMounted, ref} from "vue";
import {UserQueryCriteria, UserVo} from "/@/api/openapi";
import {useUserStore} from "/@/store";

const tableRef = ref()
const searchParams = ref<UserQueryCriteria>({
    pageNum: 1,
    pageSize: 10
});

const total = ref<number>(0);
const store = useUserStore();

onMounted(() => {
    if (store.isSign) {
        loadData();
    }
})

const currentUid = ref<number>(-1);
import {UserService} from "/@/api/openapi";
import {ElMessage} from "element-plus";

const tableData = ref<Array<UserVo>>();
const loadData = () => {
    console.log("点击了loadData")
    UserService.queryAll(searchParams.value).then((res) => {
        console.log(res)
        ElMessage.success(res)
        if (res.code === 200 && res.data !== null && res.data?.records !== null) {
            tableData.value = res.data?.records
            if (res.data?.total !== undefined) {
                total.value = res.data?.total;
            }

        }
    }, (error) => {
        ElMessage.error(error)
    }).catch((error) => {
        ElMessage.error(error)
    })
}

const centerDialogVisible = ref<boolean>(false)

const handleCurrentChange = (val: number) => {
    searchParams.value.pageNum = val
    loadData()
}

const edit = (data: any) => {
    currentUid.value = data.id;
    centerDialogVisible.value = true
}

const deleteUser = () => {
    if (currentUid.value === -1) {
        ElMessage.error("请先选择用户")
    }
    UserService.delete(currentUid.value).then((res) => {
        if (res.code === 200) {
            ElMessage.success(res.message)
        } else {
            ElMessage.error(res.message)
        }
        loadData()
    }, (error) => {
        ElMessage.error(error)
    }).catch((error) => {
        ElMessage.error(error)
    }).finally(() => {
        centerDialogVisible.value = false
    })
}

</script>

<template>
    <div class="adminUser">
        <el-button @click="loadData" class="flesh">刷新</el-button>
        <el-table border height="600" max-height="600" :ref="tableRef" :data="tableData" style="width: 100%">
            <el-table-column prop="username" label="用户名称" width="180"/>
            <el-table-column prop="signature" label="签名" width="250"/>
            <el-table-column prop="email" label="邮箱" width="180"/>
            <el-table-column prop="phone" label="电话" width="180"/>
            <el-table-column fixed="right" label="Operations" width="120">
                <template #default="scope">
                    <el-button link type="primary" size="small" @click.prevent="edit(scope.row)">删除用户</el-button>
                </template>
            </el-table-column>
        </el-table>

        <div class="pager-wrapper">
            <el-pagination
                    background
                    layout="prev, pager, next, jumper"
                    :total="total"
                    :page-size="searchParams.pageSize"
                    :current-page="searchParams.pageNum"
                    @current-change="handleCurrentChange"
            />
        </div>

        <el-dialog
                v-model="centerDialogVisible"
                title="提示"
                width="30%"
                align-center
        >
            <span>是否删除该用户</span>
            <template #footer>
      <span class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="deleteUser">
          确认
        </el-button>
      </span>
            </template>
        </el-dialog>
    </div>
</template>

<style lang="scss" scoped>
.adminUser {
    padding: 30px;
    overflow: auto;

    .flesh {
        margin-bottom: 20px;
    }

    .pager-wrapper {
        margin-top: 10px;
    }
}

</style>